<template>
    <a-form :model="form" :style="{ width: '600px' }" @submit="handleSubmit" class="register-box">
        <a-form-item field="name" tooltip="Please enter username" label="起个名字">
            <a-input v-model="form.name" placeholder="请输入用户名(账号)..." />
        </a-form-item>
        <a-form-item field="post" label="密码">
            <a-input v-model="form.pwd1" placeholder="请输入密码..." />
        </a-form-item>
        <a-form-item field="post" label="确认密码">
            <a-input v-model="form.pwd2" placeholder="请再次输入密码..." />
        </a-form-item>
        <a-form-item>
            <a-button type="primary" html-type="submit">提交注册</a-button>
        </a-form-item>
    </a-form>
</template>
  
<script>
import { reactive } from "vue";
import { Message } from '@arco-design/web-vue';
import http from '../../main';

export default {
    setup() {
        const form = reactive({
            name: "",
            pwd1: "",
            pwd2: "",
        });

        const handleSubmit = (data) => {
            console.log(data.values);

            let obj = data.values;
            if (obj.pwd1 === '' || obj.pwd2 === '' || obj.name === '') {        // 异常处理
                Message.error({
                    content: '请完善表单！',
                    closable: true
                })
                return;
            }

            if (obj.pwd1 != obj.pwd2) {     // 异常处理
                Message.error({
                    content: '密码不一致！',
                    closable: true
                })
                return;
            }

            http.post('/users/register', {
                "name": obj.name,
                "password": obj.pwd1,
                "age": 18,
                "email": null,
                "gender": true,
                "picture": null,
                "followers": 0,
                "subscribes": 0
            })
        };

        return {
            form,
            handleSubmit,
        };
    },
};
</script>       

<style scoped>
.register-box {
    margin-top: 40px;
}
</style>